<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-04-08 22:32:55
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-04-08 22:52:32
-->
<template>
  <div class="container">
    <el-row>
      <el-col :span="5" :offset="15">
        <el-button type="primary" @click="edit()" :disabled="!editable">编辑</el-button>
        <el-button type="primary" @click="saveEdit()" :disabled="editable"
          >保存</el-button
        >
        <el-button type="danger" @click="edit()" :disabled="editable">取消</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-form :model="teacherInfo" label-width="80px">
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="姓名:">
            <el-input
              v-model="teacherInfo.name"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="学校:">
            <el-input v-model="teacherInfo.school" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="账号:">
            <el-input v-model="teacherInfo.account" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="学院:">
            <el-input v-model="teacherInfo.college" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="身份证号:">
            <el-input
              v-model="teacherInfo.idCard"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="学科:">
            <el-input v-model="teacherInfo.subject" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="性别:">
            <el-radio-group v-model="teacherInfo.sex" :disabled="editable">
              <el-radio :label="true">男</el-radio>
              <el-radio :label="false">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="办公室:">
            <el-input
              v-model="teacherInfo.office"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="授课班级:">
            <el-tag
              type="success"
              v-for="(c, index) in teacherInfo.classroomList"
              :key="index"
            >
              {{ c }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="职务:">
            <el-tag type="primary">{{ teacherInfo.duty }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="联系电话:">
            <el-input
              v-model="teacherInfo.phone"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="邮箱:">
            <el-input
              v-model="teacherInfo.email"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getTeacherInfo, update2 } from "../../api/teacher.js";
export default {
  data() {
    return {
      editable: true,
      teacherInfo: {},
    };
  },

  created() {
    getTeacherInfo()
      .then((result) => {
        if (result.status == "200") {
          this.teacherInfo = result.data;
        } else {
          this.$message.error(result.message);
        }
      })
      .catch((err) => {});
  },
  methods: {
    edit() {
      this.editable = !this.editable;
    },
    saveEdit() {
      update2(this.teacherInfo)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("信息修改成功！");
            this.editable = !this.editable;
          } else {
            this.$message.error(result.message);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
.el-tag {
  margin-right: 5px;
}
</style>
